<script setup>
import _ from 'lodash';
// import {ResizeObserver} from 'vue3-resize'
import { VueDraggableNext } from 'vue-draggable-next'

import {ref, toRefs} from "vue";
import {useBuilder, useBuilderProps} from "./hooks/useBuilder.js";

import BuilderHeader from './builder-header.vue'
import BuilderNodes from './builder-nodes.vue'
import BuilderItem from "./builder-item.vue"
import BuilderMask from './builder-mask.vue'

// import BuilderMixin from './builder-mixin';
// import BuilderCompsCloud from './builder-comps-cloud';
// import BuilderNodesAdd  from "./builder-nodes-add"

defineOptions({
  name: 'JzlPageBuilderH5'
})

const emit = defineEmits(['ready'])
const props = defineProps({
  ...useBuilderProps
})

// const pageType = ref(2)
// const className = ref("page-builder-h5")
// const pinMenu = ref(true)
// const pinProp = ref(true)
const appViewBodyRef = ref(null)

// if(!props.isH5) {
//   pageType.value = 5;
//   className.value = "page-builder-pc";
// }

const {
  _r,
  loading,
  currentPage,
  isRouterEnter,
  ready,
  items,
  pageStyle,
  pageTheme,
  initElemNodes,

  pageType,
  isH5,
  className,
  dataset,
  pageWidth,
  currentItem,
  currentItemElCode,
  hoverItemElCode,
  handleSelectItem,
  handleItemEnter,
  handleItemLeave,
  handleItemStateChange,
  isEditItem,
  // lowcode,
  elemNodes,

  handleShowCompMarket,
  handlePageSetting,
  // handleLowcodeChange,
  // handlePageResize,

  currentItems,
  currentNode,
  pinMenu,
  pinProp,
  actions,
  actionsTop,
  actionsBottom,

  handleHoverElenode,
  handleMouseLeaveElenode,
  handleSelectElenode,
  handleMenuClick,
  handleShowCloudCompWin,
  handleDropDone,
  handlePinPropChange,
  handlePinMenuChange,

  pageAddShow,
  pageForm,
  pageAdd,

  handleClickDesignBody,
  submit,
  handleCustomBtnClick,
  handleCustomBtnDblClick,
} = useBuilder(props, emit, {

})

/*const handlePageItemSort = () => {
  // initElemNodes()
  $bus.emit('design:changeElemNodes')
}*/

/*const handleMarketSelectCallback = (def) => {
  let item = dragClone(def);
  items.value.push(item);
}*/


defineExpose({
  page: currentPage
})
</script>

<template>
  <div
    class="builder-page-container"
    :class="className"
    v-loading="loading"
  >
    <BuilderHeader
      :current-page="currentPage"
      :is-router-enter="isRouterEnter"
      :page-type="pageType"
      v-bind="$attrs"
      @showCompMarket="handleShowCompMarket"
      @showPageSetting="handlePageSetting"
      @submit="submit"
    />
    <div
      class="page-builder-container"
      ref="bbody"
      v-if="ready"
    >
      <div
        class="page-builder-body"
        :class="{ 'pin-prop': pinProp, 'pin-menu': pinMenu }"
        ref="jbody"
      >
        <div
          class="ele-design-body"
          ref="bformbody"
          @click="handleClickDesignBody"
        >
          <div
            class="ele-design-body-items"
          >
            <div
              class="jzl-page-body ele-design-body-items-drag"
              :class="[{ 'empty': !items || items.length <= 0 }, pageTheme ]"
              :style="pageStyle"
              ref="appViewBodyRef"
              @mouseleave.stop="handleMouseLeaveElenode"
              @scroll="hoverItemElCode = ''"
            >
              <BuilderMask
                :current-item="currentItem"
                :current-el-code="currentItemElCode"
                :hover-el-code="hoverItemElCode"
                :elem-nodes="elemNodes"
                :current-node="currentNode"
                :container="appViewBodyRef"
              />

              <div
                v-if="actionsTop?.length"
                class="jzl-page-actions"
                :class="{ 'jzl-h5-actions': isH5 }"
              >
                <template v-for="(action, idx) in actionsTop">
                  <DyncRender
                    v-if="_r?._actions?.[ action.action_code ]?.render"
                    :row="action"
                    :data-list="actions"
                    :index="idx"
                    :page-dataset="dataset.state"
                    :render="_r?._actions?.[ action.action_code ]?.render"
                    :form="currentPage"
                    :ref="action.action_code"
                  />
                  <LowcodeButton
                    v-else
                    :is-h5="isH5"
                    :page-type="pageType"
                    :action="action"
                    :ref="action.action_code"
                    @click="handleCustomBtnClick($event, action)"
                    @dblclick.native="handleCustomBtnDblClick($event, action)"
                  />
                </template>
              </div>

              <VueDraggableNext
                v-model="items"
                @sort="initElemNodes()"
              >
                <template
                  v-for="(item, index) in items"
                  :key="item.page_item_code || index"
                >
                  <BuilderItem
                    :item="item"
                    :is-h5="isH5"
                    :items="items"
                    :vars="dataset.state"
                    :index="index"
                    :page-width="pageWidth"
                    :current-item="currentItem"
                    @selectItem="handleSelectItem"
                    @itemEnter="handleItemEnter"
                    @itemLeave="handleItemLeave"
                    @itemStateChange="handleItemStateChange"
                  />
                </template>
              </VueDraggableNext>
              <!--              <ResizeObserver @notify="handlePageResize"/>-->

              <div
                v-if="actionsBottom?.length"
                class="jzl-page-actions"
                :class="{ 'jzl-h5-actions': isH5 }"
              >
                <template v-for="(action, idx) in actionsBottom">
                  <DyncRender
                    v-if="_r?._actions?.[ action.action_code ]?.render"
                    :row="action"
                    :data-list="actions"
                    :index="idx"
                    :render="_r?._actions?.[ action.action_code ]?.render"
                    :form="currentPage"
                    :page-dataset="dataset"
                    :ref="action.action_code"
                  />
                  <LowcodeButton
                    v-else
                    :is-h5="isH5"
                    :page-type="pageType"
                    :action="action"
                    :ref="action.action_code"
                    @click="handleCustomBtnClick($event, action)"
                    @dblclick.native="handleCustomBtnDblClick($event, action)"
                  />
                </template>
              </div>
            </div>
          </div>
        </div>

        <BuilderNodes
          v-if="ready"
          ref="builderNodes"
          :page-type="pageType"
          :items="items"
          :is-edit-item="isEditItem"
          :dataset="dataset"
          :elem-nodes="elemNodes"
          :in-pin-menu="pinMenu"
          :current-item-el-code="currentItemElCode"
          :current-item="currentItem"
          :current-page="currentPage"
          :current-items="currentItems"
          :current-node="currentNode"
          @hoverElenode="handleHoverElenode"
          @selectElenode="handleSelectElenode"
          @selectItem="handleSelectItem"
          @create-page-item="handleMenuClick"
          @show-cloud-comps="handleShowCloudCompWin"
          @node-drop-done="handleDropDone"
          @pinPropChange="handlePinPropChange"
          @pinMenuChange="handlePinMenuChange"
        />
<!--        @changeElemNodes="initElemNodes" @eleNodeTreeChange="initElemNodes"-->
      </div>
      <el-dialog
        title="新增页面"
        :visible.sync="pageAddShow"
        width="400px">
        <el-form
          :model="pageForm">
          <el-form-item
            label="页面名称"
            label-width="100">
            <el-input
              v-model="pageForm.name"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="pageAddShow = false">取 消</el-button>
          <el-button type="primary" @click="pageAdd()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
